<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <title>缺陷系统登录页</title>
    <link rel="stylesheet" href="/css/index.css">
    <link type="text/css" rel="stylesheet" href="/css/style.css" />
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <script type="text/javascript">
        window.addEventListener("load",function(){
            document.getElementById("captcha").addEventListener("click",function(){
                this.src="/code?t="+new Date().getTime();
            });

            $(document).ready(function () {
                var height=$(document).height();
                $('body').css('height',height);
                var mart=height-500;
                mart = mart/2;
                $('.loginBox').css('marginTop',mart);
            })
        });
    </script>
</head>

<body>
<div class="loginBox" id="app">
    <h1>登录</h1>
    <form id="form">
        <div class="item">
            <div class="icon"><img src="/images/icon1.png" /></div>
            <div class="txt"><input id="username" name="username" type="text" placeholder="请输入您的用户名"/></div>
        </div>
        <div class="item">
            <div class="icon"><img src="/images/icon2.png" /></div>
            <div class="txt"><input id="password" name="password" type="password" placeholder="请输入您的密码"/></div>
        </div>
        <div class="item">
            <div class="icon"><img src="/images/icon3.png" /></div>
            <div class="txt"><input id="code" name="code" type="text" placeholder="请输入验证码"/></div>
            <div class="yzm"><img src="/code" id="captcha"/></div>
        </div>
    </form>
    <div class="item_3">
        <input type="submit" value="登录" class="btn" @click="login()"/>
    </div>
</div>
<script type="text/javascript">
    var _this;
    var app = new Vue({
        el:"#app",
        data:{

        },
        created:function(){

        },
        methods:{
            login() {
                var _this = this;
                var username = $("#username").val();
                var password = $("#password").val();
                var code = $("#code").val();
                if(code == ""){
                    _this.$message("验证码不能为空");
                }else if(username == ""){
                    _this.$message("账号不能为空");
                }else if(password == ""){
                    _this.$message("密码不能为空");
                }else{
                    $.ajax({
                        url: "/login",
                        type: "post",
                        data: $("#form").serialize(),
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            _this.$message(data.object.message);
                            if (data.code == "200") {
                                location.href = "/index.html"
                            }
                        },
                        error: function (error) {
                            _this.$message("系统维护中");
                        }
                    });
                }

            }

        },

    });

</script>
</body>
</html>